import tpl from './index.html';

export default {
    // 组件字模板
    template: tpl,
    // 外部传入数据
    propTypes: {
        className: {
            type: 'string'
        },
        style: {
            type: 'string'
        },
        value: {
            type: ['number', 'array'],
            value: 40
        },
        // 最大值
        max: {
            type: 'number',
            value: 100
        },
        // 最小值
        min: {
            type: 'number',
            value: 0
        },
        // 最小步数
        step: {
            type: 'number',
            value: 1
        },
        disabled: {
            type: 'boolean',
            value: false
        },
        range: {
            type: 'boolean',
            value: false
        },
        type: {
            type: 'string'
        }
    },
    // 内部数据
    data: function () {
        return {
            name: "组件名称",
            // 状态
            states: {

            },
            // 配置 
            opts: {

            },
            // 其他
            other: {

            },
            dragging: false
        }
    },
    //计算属性
    computed: {
        percent: {
            get: function () {
                var me = this;
                var range = me.get('max') - me.get('min');
                var percentNum = range > 0 ?
                    (me.get('value') - me.get('min')) / range * 100 :
                    0;
                return percentNum > 100 ?
                    100 :
                    (percentNum < 0 ? 0 : percentNum.toFixed(2));
            }
        },

        fillStyle: {
            get: function () {
                return 'width: ' + this.get('percent') + '%';
            }
        },
        thumbStyle: {
            get: function () {
                return 'left: ' + this.get('percent') + '%';
            }
        },
        range: {
            get: function () {
                return this.get('max') - this.get('min');
            }
        }
    },

    // 方法
    methods: {
        handleDragMouseMove: function (event) {
            this.onDragUpdate(event);
        },

        handleMouseDown: function (event) {
            var me = this;
            if (me.get('disabled')) {
                return;
            }

            me.setValue(event);

            Yox.dom.on(document, 'mousemove', me.handleDragMouseMove);
            Yox.dom.on(document, 'mouseup', me.handleDragMouseEnd);

            event.prevent();
            me.onDragStart();
        },

        handleDragMouseEnd: function () {
            var me = this;
            var disabled = me.get('disabled')
            if (disabled) {
                return;
            }
            Yox.dom.off(document, 'mousemove', me.handleDragMouseMove);
            Yox.dom.off(document, 'mouseup', me.handleDragMouseEnd);
            me.onDragStop();
        },

        onDragStart: function () {
            this.set({
                dragging: 1,
                active: 1
            });
            this.fire('dragStart');
        },

        onDragStop: function () {
            this.set({
                dragging: 0,
                active: 0
            });
            this.fire('dragStop');
        },

        onDragUpdate: function (event) {
            var me = this;
            if (me.get('draging')) {
                return;
            }
            me.set('draging', 1);
            me.set('events', event);
            window.requestAnimationFrame(me.animReq.bind(this));
        },
        animReq: function () {
            var me =this;
            me.set('draging', 0);
            if (!me.get('disabled')) {
                var event = me.get('events')
                me.setValue(event);
            }
        },
        handleMouseUp: function () {
            if (this.get('disabled')) {
                return;
            }
            this.set('active', 0);
        },

        handleMouseEnter: function () {
            if (this.get('disabled')) {
                return;
            }
            this.set('hover', 1);
        },

        handleMouseLeave: function () {
            if (this.get('disabled')) {
                return;
            }
            this.set('hover', 0);
        },

        setValue: function (event) {
            event = event.originalEvent;
            var clientX = event.touches ? event.touches[0].clientX : event.clientX;

            var me = this;
            var element = me.$el;
            var oldValue = me.get('value');
            var elementLeft = element.getBoundingClientRect().left;
            var elementWidth = element.offsetWidth;
            var min = me.get('min');

            var value = 0;
            value = elementWidth && ((clientX - elementLeft) / elementWidth * me.get('range'));
            value = Math.round(value / me.get('step')) * me.get('step') + min;
            value = parseFloat(value.toFixed(5));

            value = value > me.get('max') ?
                me.get('max') :
                (value < min ? min : value);

            if (value !== oldValue) {
                me.set({
                    value: value
                });
                me.fire(
                    'change', {
                        value: value,
                        oldValue: oldValue
                    }
                );
            }
        }
    },
    // 监听
    watchers: {
        "value": {
            watcher: function (newValue) {

            },
            sync: true
        }
    },
    afterMount: function () {
        var me = this;
        me.handleDragMouseMove = me.handleDragMouseMove.bind(me);
        me.handleDragMouseEnd = me.handleDragMouseEnd.bind(me);
    }
};